<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app" disabled style="color: red; background: blue">
      {{name}}
      <span>
        hello world
        <p><i>Tom</i></p>
        <p>jerry</p>
      </span>
    </div>
    <script src="../dist/vue.js"></script>
    <script>
      /*
				Vue 是 MVVM 框架，（基于 MVC升级，弱化 Controller），有没有完全遵循 mvvm，因为传统 mvvm 框架是不能手动操作数据的，在 vue 中可以手动通过 ref 去操作组件数据 

				Vue2 的核心：响应式原理， 使用 defineProperty 来监听数据的变化
        
        双向绑定主要体现在 v-model 上
        
        vm.$options 获取到用户传递所有参数

        vue2 中 $开头的属性，是不会变成响应式的，用户如果传递了带有 $的属性会被忽略，处理掉， data:{"$a": 124} vm.$a是获取不到的返回undefined

        vue2 的数据源 props data methods computed watch
				
        vue2 数组修改数据后实在麻烦就直接覆盖原始数据，暴力


        vue2中的响应式原理就是为对象的每个属性 添加 set 和 get，会递归遍历，因此，用户在写代码的时候对data的数据的对象嵌套不要太过于深，
        vue2中数组的长度和索引没有监控，
        vue2中的数组没有采用 defineProperty ，采用了函数的劫持重写的数组的 7 个方法，用户在调用的时候或执行这个这个方法，用户添加数据时会再次被劫持，后再执行数据的原生方法，因此数组中的对象也是响应式的
        


        React 本身是一个 V 框架，只是将数据转换成试图，并没有绑定操作，更新数据也是手动调用 setState 去更新的
        react 的数据源主要在 props 和 state data
			*/
      const vm = new Vue({
        el: "#app",
        data: function () {
          return {
            name: "Timly",
            age: 100,
            arr: [1, { b: 343 }, 3],
          };
        },
      });

      const t = setTimeout(() => {
        vm.name = "jerry";
        console.log("setTimeout");
      }, 3000);

      console.log(vm.$options);
    </script>
  </body>
</html>
